<template>
    <div>
        <vue-video-player
                class="video-player-box"
                ref="videoPlayer"
                :options="playerOptions"
                :playsinline="true"
                customEventName="customstatechangedeventname"
                @play="onPlayerPlay"
                @pause="onPlayerPause"
                @ended="onPlayerEnded"
                @waiting="onPlayerWaiting"
                @playing="onPlayerPlaying"
                @loadeddata="onPlayerLoadeddata"
                @timeupdate="onPlayerTimeupdate"
                @canplay="onPlayerCanplay"
                @canplaythrough="onPlayerCanplaythrough"
                @statechanged="playerStateChanged"
                @ready="playerReadied"
        >
        </vue-video-player>
    </div>
</template>
<!--
    // 视频格式
    type："video/webm"   // 可以播放，用ogg也可打开
    type："video/ogg"    // 可以播放，用webm也可打开
    type："video/3gp"    // 可以播放
    type："video/mp4"    // 可以播放
    type："video/avi"    // 打不开 无法播放
    type："video/flv"    // 打不开 可以使用flvjs代替
    type："video/mkv"    // 打不开 使用video/mp4可以播放
    type："video/mov"    // 打不开 使用video/mp4可以播放
    type："video/mpg"    // 打不开 未测试
    type："video/swf"    // 打不开  未测试
    type："video/ts"     // 打不开 未测试
    type："video/wmv"    // 打不开 未测试
    type："video/vob"    // 没转化 未测试
    type："video/mxf"    // 转化出错 未测试
    type: "video/rm"     // 转化出错 未测试
    // 组件方法
    重置进度条
    this.player.src(src)
    加载视频
    this.player.load();
    播放视频
    this.player.play();
    暂停播放
    this.player.pause();
    直接全屏 如果当前设备支持的话
    this.player.requestFullscreen();
    在全屏模式下，将视频恢复到正常大小
    this.player.exitFullscreen();
    当环境不支持全屏时 则扩展铺满容器
    this.player.enterFullWindow();
    重置播放器
    this.player.reset();
    返回当前播放源信息
    this.player.currentSources();
    获取或者设置预加载属性
    this.player.preload(val);
    播放控件是否显示
    this.player.controls(false);
    /* 父组件可以通过获取当前组件的 player 来调用 videoPlayer 组件的方法 */
 -->
<script>
    import { videoPlayer } from 'vue-video-player'
    import 'video.js/dist/video-js.css'
    export default {
        name:'videoPlus1',
        components: {
            VueVideoPlayer: videoPlayer
        },
        data() {
            return {
                playerOptions: {
                    // videojs options
                    // 是否等浏览器准备好后自动播放
                    autoplay: true,
                    // 是否静音
                    muted: true,
                    // 结束后是否重新开始
                    loop: false,
                    // 语言
                    language: 'en',
                    // 播放速度可选列表
                    playbackRates: [0.5,1.0,1.5,2.0,16],
                    // 播放视频源
                    sources: [
                        {
                            type: 'video/mp4',
                            src: 'https://v-data.hinews.cn/vod/20230328/849f21435434b7a4df0199309908a35c_1280x720.mp4'
                        }
                    ],
                    // 视频比例
                    aspectRatio: '4:3',
                    //  为 true 时, 播放器具有流畅的大小
                    fluid: true,
                    // 封面
                    // poster: '/static/images/author.jpg'
                    controlBar: {
                        //当前时间和持续时间的分隔符
                        timeDivider: true,
                        //显示持续时间
                        durationDisplay: true,
                        //是否显示剩余时间功能
                        remainingTimeDisplay: false,
                        //全屏按钮
                        fullscreenToggle: true,
                        //播放暂停按钮
                        playToggle: true,
                        //音量控制
                        volumeMenuButton: true,
                        //当前播放时间
                        currentTimeDisplay: true,
                        //点播流时，播放进度条，seek控制
                        progressControl: true,
                        //直播流时，显示LIVE
                        liveDisplay: true,
                        //播放速率，当前只有html5模式下才支持设置播放速率
                        playbackRateMenuButton: true
                    }
                }
            }
        },
        mounted() {
            console.log('this is current player instance object', this.player)
        },
        computed: {
            player() {
                return this.$refs.videoPlayer.player
            }
        },
        methods: {
            // 播放(播放时会调用)(用户操作调用)
            onPlayerPlay(player) {
                console.log('播放', player)
                this.$emit('onPlayerPlay', player)
            },
            // 暂停(暂停时调用)(用户操作调用)
            onPlayerPause(player) {
                console.log('暂停', player)
                this.$emit('onPlayerPause', player)
            },
            // 播放状态改变回调
            playerStateChanged(playerCurrentState) {
                console.log('数据变化', playerCurrentState)
                this.$emit('playerStateChanged', playerCurrentState)
            },
            // 准备就绪(预加载前会调用)(初始化调用)将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数
            playerReadied(player) {
                console.log('准备就绪', player)
                this.$emit('playerReadied', player)
            },
            // 结束(视频播放完毕调用)
            onPlayerEnded(player) {
                console.log('结束', player)
                this.$emit('onPlayerEnded', player)
            },
            // 等待(视频中出现loading就会调用,加载时调用)(高频调用)
            onPlayerWaiting(player) {
                console.log('等待', player)
                this.$emit('onPlayerWaiting', player)
            },
            // 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
            onPlayerPlaying(player) {
                console.log('播放中', player)
                this.$emit('onPlayerPlaying', player)
            },
            // 当播放器在当前播放位置下载数据时触发
            onPlayerLoadeddata(player) {
                console.log('预加载', player)
                this.$emit('onPlayerLoadeddata', player)
            },
            // 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
            onPlayerTimeupdate(player) {
                console.log('进度更新', player)
                this.$emit('onPlayerTimeupdate', player)
            },
            // 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
            onPlayerCanplay(player) {
                console.log('是否播放', player)
                this.$emit('onPlayerCanplay', player)
            },
            // 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
            onPlayerCanplaythrough(player) {
                console.log('能够从头到尾播放', player)
                this.$emit('onPlayerCanplaythrough', player)
            }
        }
    }
</script>


